<template>
  <view class="container">
    <view class="map-section">
       <view class="map-container">
		   
      <cusomMap></cusomMap>
        <!-- 地图下方的仓库筛选器 -->
        <view class="map-filter">
          <picker 
            @change="onRegionChange"
            :value="regionIndex"
            :range="regionList"
            range-key="name"
            class="picker"
          >
            <view class="picker-text">
              {{ regionList[regionIndex].name }} <uni-icons type="down" size="16"></uni-icons>
            </view>
          </picker>
        </view>
      </view>
    </view>

    <!-- 数据统计区域 -->
    <view class="stats-section">
      <view class="section-title">仓库业务数据</view>
      
      <!-- 数据卡片网格 -->
      <view class="stats-grid">
        <view class="stat-card">
          <view class="stat-value">{{ skuCount }}</view>
          <view class="stat-label">SKU总数</view>
        </view>
        <view class="stat-card">
          <view class="stat-value">{{ inCount }}</view>
          <view class="stat-label">入库单数</view>
        </view>
        <view class="stat-card">
          <view class="stat-value">{{ outCount }}</view>
          <view class="stat-label">出库单数</view>
        </view>
        <view class="stat-card">
          <view class="stat-value">{{ volumeRate }}%</view>
          <view class="stat-label">容积使用率</view>
        </view>
      </view>

      <!-- 图表区域 -->
      <view class="chart-container">
        <view class="chart-title">SKU分类占比</view>
        <view class="chart-placeholder">
          <!-- 实际项目中可替换为ucharts等图表组件 -->
         <canvas 
              type="2d" 
              canvas-id="myChart" 
              class="chart"
            ></canvas>
        </view>
      </view>
    </view>

    <!-- 申请表单区域 -->
    <view class="form-section">
      <view class="section-title">申请信息</view>
      <form @submit="onSubmit">
        <view class="form-group">
          <view class="form-label">申请仓库</view>
          <picker 
            @change="onWarehouseChange"
            :value="warehouseIndex"
            :range="warehouseList"
            range-key="warehouse_name"
            class="form-picker"
          >
            <view class="picker-placeholder">
              {{ warehouseIndex >= 0 ? warehouseList[warehouseIndex].warehouse_name : '请选择仓库' }}
            </view>
          </picker>
        </view>

        <view class="form-group">
          <view class="form-label">申请理由</view>
          <textarea 
            v-model="applyReason"
            class="form-input"
            placeholder="请填写申请使用该仓库的理由"
            maxlength="200"
          ></textarea>
        </view>

        <view class="form-group">
          <view class="form-label">预计使用容积</view>
          <input 
            v-model.number="volume"
            type="number"
            class="form-input"
            placeholder="请输入预计使用容积(立方米)"
          ></input>
        </view>

        <button 
          form-type="submit" 
          class="submit-btn"
          :disabled="!canSubmit"
        >
          提交申请
        </button>
      </form>
    </view>
  </view>
</template>

<script>
import * as echarts from 'echarts'
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
import cusomMap from '../cusomMap.nvue';
export default {
name:"suplierSetup",
  components: {
    uniIcons,
	cusomMap
  },
  data() {
    return {
      // 地图相关
      mapLatitude: 39.9042, // 默认纬度(北京)
      mapLongitude: 116.4074, // 默认经度
      mapMarkers: [
        {
          id: 1,
          latitude: 39.9042,
          longitude: 116.4074,
          title: '北京仓库',
          iconPath: '/static/marker.png',
          width: 30,
          height: 30
        },
        {
          id: 2,
          latitude: 31.2304,
          longitude: 121.4737,
          title: '上海仓库',
          iconPath: '/static/marker.png',
          width: 30,
          height: 30
        }
      ],
      
      // 区域选择
      regionList: [
        { id: 1, name: '全部区域' },
        { id: 2, name: '华北地区' },
        { id: 3, name: '华东地区' },
        { id: 4, name: '华南地区' }
      ],
      regionIndex: 0,
      
      // 仓库列表
      warehouseList: [
        { code: 'WH001', warehouse_name: '北京一号仓库', address: '北京市朝阳区' },
        { code: 'WH002', warehouse_name: '上海浦东仓库', address: '上海市浦东新区' },
        { code: 'WH003', warehouse_name: '广州白云仓库', address: '广州市白云区' }
      ],
      warehouseIndex: -1,
      
      // 表单数据
      applyReason: '',
      volume: null,
      
      // 统计数据
      skuCount: 1250,
      inCount: 320,
      outCount: 280,
      volumeRate: 68,
      
      // 图表实例
      pieChart: null
    };
  },
  computed: {
    // 判断是否可以提交表单
    canSubmit() {
      return this.warehouseIndex >= 0 && this.applyReason.trim() && this.volume > 0;
    }
  },
  onReady() {
    // 初始化饼图
    this.initChart();
  },
  methods: {
    // 区域选择变化
    onRegionChange(e) {
      this.regionIndex = e.detail.value;
      // 实际项目中可根据区域筛选仓库和更新地图
    },
    
    // 仓库选择变化
    onWarehouseChange(e) {
      this.warehouseIndex = e.detail.value;
      // 实际项目中可根据选择的仓库更新地图中心点
      const selected = this.warehouseList[this.warehouseIndex];
      if (selected) {
        // 这里只是示例，实际应根据仓库地址获取经纬度
        this.mapLatitude = selected.latitude || 39.9042;
        this.mapLongitude = selected.longitude || 116.4074;
      }
    },
    
    // 提交申请
    onSubmit() {
      const formData = {
        warehouseCode: this.warehouseList[this.warehouseIndex].code,
        warehouseName: this.warehouseList[this.warehouseIndex].warehouse_name,
        reason: this.applyReason,
        volume: this.volume,
        applyTime: new Date().toISOString()
      };
      
      // 实际项目中调用接口提交数据
      uni.showLoading({ title: '提交中...' });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({ title: '申请提交成功', icon: 'success' });
        // 提交成功后返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }, 1000);
    },
    
    // 初始化饼图
    initChart() {
      // 获取 canvas 上下文（Uniapp 中需通过 canvas-id 获取）
      const chart = echarts.init(
        uni.createCanvasContext('myChart', this), // 传入上下文
        null,
        {
          width: 750, // 宽度（rpx 单位，需根据实际屏幕调整）
          height: 400 // 高度（rpx 单位）
        }
      );

      // 设置图表配置项
      const option = {
        title: { text: 'ECharts 示例' },
        tooltip: {},
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 15]
        }]
      };

      // 渲染图表
      chart.setOption(option);
    }
  }
};
</script>

<style scoped>
.container {
  padding: 16rpx;
  width: 100%;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  color: #333;
  margin: 24rpx 0;
  padding-left: 8rpx;
  border-left: 4rpx solid #007aff;
}

/* 地图区域样式 */
.map-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.map-container {
  position: relative;
}

.map {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
}

.map-filter {
  margin-top: 16rpx;
}

.picker {
  background-color: #f9f9f9;
  padding: 16rpx;
  border-radius: 8rpx;
}

.picker-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #666;
}

/* 统计区域样式 */
.stats-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.stat-card {
  background-color: #f9f9f9;
  padding: 20rpx;
  border-radius: 12rpx;
  text-align: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #007aff;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.chart-container {
  padding: 16rpx 0;
}

.chart-title {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.chart-placeholder {
  width: 100%;
  height: 300rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  border-radius: 12rpx;
}

.pie-chart {
  width: 300rpx;
  height: 200rpx;
}

/* 表单区域样式 */
.form-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 24rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.form-picker, .form-input, textarea {
  padding: 16rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  font-size: 26rpx;
}

textarea {
  min-height: 120rpx;
  resize: vertical;
}

.picker-placeholder {
  color: #999;
}

.submit-btn {
  width: 100%;
  padding: 20rpx 0;
  background-color: #007aff;
  color: #fff;
  font-size: 30rpx;
  border-radius: 8rpx;
  margin-top: 24rpx;
}

.submit-btn:disabled {
  background-color: #ccc;
}
</style>